import { Button, message } from 'antd';
import { useState } from 'react';

import userStore from '@/store/userStore';
import { toEditor, toGoodsDetail, toProductDetail } from '@/utils';

import { CartModal } from './modal';
import './index.css';
import setEditorDate from '@/pages/editor/setEditorDate';
import { cloneDeep } from 'lodash-es';
import designEditor from '@/editorComponent/designEditor';
import editorStore from '@/editorComponent/editorStore';
import { s } from 'node_modules/@fullcalendar/core/internal-common';
import goodsUtils from '@/utils/goodsUtils';

export function CommonButtons({
  edit,
  share,
  good,
  detail,
  design,
  cart,
  designTitle,
  modName,
}: any) {
  const [showModal, setShowModal] = useState(false);

  const toDetail = () => {
    if (modName === 'product') {
      toProductDetail(good);
      return;
    }
    toGoodsDetail(good);
  };

  const toEdit = () => { };

  const toShare = () => { };

  const toDesign = async () => {
    const token = userStore.getState().userToken;
    if (token.accessToken) {
      window.location.href = `/#/editor`;
      await setEditorDate(undefined, {
        color: '白色',
        colorValue: `#ffffff`,
        designData: {
          front: JSON.parse(good.designData as string) as never,
          left_front: JSON.parse(good.designData as string) as never,
          right_front: JSON.parse(good.designData as string) as never,
        },
        ppId: 0,
        previewThumb: [],
        thumbs: [],
        printArea: 'front',
        threadColor: '#ffffff',
      });
      const { goodsData, activeComponent } = editorStore;
      const fabricMark = designEditor.fabricMarkMap.get(activeComponent);
      if (goodsData && fabricMark) {
        const component = goodsData.component.find(c => c.key === activeComponent);
        if (component) {
          const { print_area_left, print_area_top, print_area_width, print_area_height } = component;

          let offsetLeft = 0; // 根据打印位置计算模版元素的偏移量
          let offsetTop = 0;
          let offsetScale = 1;

          // 200mm*265mm 的局部印 和 280mm*350mm的局部印
          if ([200, 280].includes(print_area_width)) {
            offsetScale = (print_area_width / fabricMark.sideLength) / (400 / 1024);
            offsetLeft = ((print_area_left + (print_area_width / 2)) / fabricMark.sideLength) * 1024 - 200;
            offsetTop = ((print_area_top + (print_area_height / 2)) / fabricMark.sideLength) * 1024 - 265;
            //满版印就居中
          } else {
            offsetScale = 1;
            offsetLeft = (512 - 200);
            offsetTop = (512 - 265);
          }
          const designData = cloneDeep(JSON.parse(good.designData || "{}"));
          designData.objects.map((o: fabric.Object) => {
            o.left! += offsetLeft;
            o.top! += offsetTop;
            o.scaleX! *= offsetScale;
            o.scaleY! *= offsetScale;
          });
          editorStore.setLoadding(true);
          // 保留底色
          designData.background = designEditor.fabricCanvas.backgroundColor;
          designEditor.clear();
          designEditor.fabricCanvas.loadFromJSON(designData, () => {
            editorStore.setLoadding(false);
          });
        }
      }
    } else {
      tipLogin();
    }
  };

  const toAddCart = () => {
    const token = userStore.getState().userToken;
    if (token.accessToken) {
      setShowModal(true);
    } else {
      tipLogin();
    }
  };

  const tipLogin = () => {
    console.log('按钮点击登录');
    userStore.getState().actions.setShowLogin(true);
    message.warning('请登录');
  };

  return (
    <>
      <div className="buttons-box bg-[#ffffff]">
        <div className="buttons absolute bottom-[10px] flex w-full justify-around">
          {edit ? <Button onClick={toEdit}>编辑</Button> : ''}
          {share ? <Button onClick={toShare}>分享</Button> : ''}
          {detail ? <Button onClick={() => toDetail()}>查看详情</Button> : ''}
          {design ? (
            <Button type="primary" onClick={() => toDesign()}>
              {designTitle || '二次设计'}
            </Button>
          ) : (
            ''
          )}
          {cart ? (
            <Button type="primary" onClick={() => toAddCart()}>
              加入购物车
            </Button>
          ) : (
            ''
          )}
        </div>
      </div>
      <CartModal showModal={showModal} good={good} onClose={() => setShowModal(false)} />
    </>
  );
}
